Progressive Web Apps (PWA) Nedir ?

Progressive Web Apps (PWA), kullanıcılara uygulama benzeri bir deneyim sunmak için modern web yeteneklerini kullanan bir web uygulamasıdır. Bu uygulamalar belirli gereksinimleri karşılar. Sunucular ile beraber, URL'ler aracılığıyla erişilebilir ve arama motorları tarafından dizine eklenir.

Güncellemenize gerek yok. PWA’leri güncelleme zorunluluğunuz da yok. PWA’ler aslında bir domaine bağlı olarak çalışan web siteleri olduğu için sitenizde yaptığınız herhangi bir güncelleme, doğrudan uygulamanıza da yansır.

Bağlantı durumunuz ne olursa olsun, kullanıcılarınızı kaybetmeyin. PWA’ler en düşük bağlantı hızında bile kullanıcı deneyimini kötü etkileyecek görüntülenme bozuklukları ve geç bağlantı problemleriyle karşılaşmanıza engel olur. “Cache” mekanizmaları ile uygulamanızın yavaş bağlantılardan etkilenmesine engel olursunuz.

İOS'ta PWA'ların yetenekleri

• Coğrafi Konum
• Sensörler (Manyetometre, İvmeölçer, Jiroskop)
• Kamera
• Ses çıkışı
• Konuşma Sentezi (sadece kulaklıklara bağlı)
• Apple Pay
• WebAssembly, WebRTC, WebGL yanı sıra bir bayrak altında birçok diğer deneysel özellikleri.

Yerel iOS uygulamalarıyla karşılaştırıldığında sınırlamalar

• Uygulama çevrimdışı veri ve dosyaları yalnızca 50 Mb'ye kadar saklayabilir
• Kullanıcı uygulamayı birkaç hafta boyunca kullanmıyorsa, iOS uygulamanın dosyalarını serbest bırakır. Simge ana ekranda hala var olacak ve erişildiğinde uygulama tekrar indirilecek
• Bluetooth, seri, Beacons, Touch ID, Face ID, ARKit, altimetre sensörü, pil bilgisi gibi bazı özelliklere erişim yok
• Arka plandayken yürütme koduna erişim yok
• Özel bilgilere (kişiler, arka plan konumu) ve yerel sosyal uygulamalara erişim yok
• Uygulama Ödemelerine ve diğer birçok Apple tabanlı hizmetlere erişim yok
• İPad'de, diğer uygulamalar ile ekranı paylaşan Side veya Split Views ile çalışmaya erişemezsiniz, PWA'lar her zaman tüm ekranı kaplarlar.
• Push Bildirimleri, simge rozeti veya Siri entegrasyonu yok

Android'de, PWA'ların neler yapabileceği

• Android'de 50 Mb'den daha fazla depolayabilirsiniz
• Uygulamayı kullanmazsanız Android dosyaları silmez, ancak dosyaları depolama baskısı altında silebilir. Ayrıca, kullanıcı tarafından çok yüklü veya kullanılmışsa, PWA Kalıcı Depolama talebinde bulunabilir
• BLE cihazları için Bluetooth erişimi
• Yerel paylaşım iletişim kutusuna erişmek için Web Share
• Konuşma tanıma
• Arka Plan Senkronizasyonu ve Web Push Bildirimleri
• Kullanıcıyı uygulamayı yüklemeye davet eden Web App Banner
• Açılış ekranını ve yönlerini özelleştirebilirsiniz (biraz)

Peki PWA için neler gerekli:

                SSL: PWA olarak hazırlayacağınız web sitenizin mutlaka SSL’e sahip olması gerekiyor. Bu uygulamanızın güvenilirliği açısından da çok önemli. Google geçtiğimiz aylarda SSL olmayan web sitelerini arama sonuçlarında güvenli olmayan siteler arasında listeleyeceğini duyurmuştu. Aslında artık SSL kullanımı neredeyse zorunlu hale geldi.

                Web App Manifest: Manifest.json aslında uygulamanızın ayar dosyasıdır. Tarayıcıların tanıyabilmesi için dosyanın konumunu HTML içerisinde belirtmeniz gerekiyor. Manifest.json ile uygulamanızın, hangi cihazda hangi ikonu kullanacağını belirleyebilir, tarayıcı çerçevesi görüntülenmeden fullscreen modda gösterimini seçebilir, rengine karar verebilir, yatay ve dikey gösterim modunu düzenleyebilirsiniz. Manifest.json ile hangi ayarların yapılandırılabildiğini daha detaylı incelemek için Google ve MDN sayfalarını inceleyebilirsiniz.

                Service Worker: Service worker ile PWA ile anlık bildirimler, seçilen dosyaların “cache”lenebilmesi, offline durumda uygulamanızı çalıştırabilme ve arkaplanda senkronizasyon (background sync) gibi özelliklerle ilgili ayarları yapabilirsiniz. Bunun için öncelikle bir Service worker Javascript dosyası oluşturmanız ve bunu index.html altında Service worker olarak tanımlamanız gerekiyor. Service worker ile ilgili debugging işlemlerini DevTools üzerinden Uygulamalar (Application) altından kontrol edebilirsiniz.

Özetle PWA:

Güvenilir: Hızlı yükleme ve çevrimdışı çalışabilir

Hızlı: Pürüzsüz Animasyonlar, internetsiz gezinti, takılmadan kaydırma(scrolling)

Ek özellik: Ana ekrandan başlatma ve push bildirimi

PWA’dan örnekler: